<template>
  <div id="app">
    <table border="1" width="1000" style="border-collapse: collapse">
      <caption :style="{ marginBottom: '10px' }">
        购物车
        <input
          type="text"
          placeholder="请输入查询的关键字..."
          v-model="usertxt"
          @keydown.enter="lookup"
        />
        <button @click="sorts = 1">升序排列</button>
        <button @click="sorts = 2">降序排列</button>
      </caption>

      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="Allbtn" /> <span>全选</span>
            <button @click="backbtn">反选</button>
            <button @click="Delbtn">全清</button>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <shop
        v-for="(item, index) in goodList"
        :key="index"
        :mor="item"
        :list="goodList"
        :index="index"
        @BtnDel="BtnDel"
        @BtnAdd="BtnAdd"
        @tou="tou"
        @empty="empty"
      />
      <tfoot>
        <tr>
          <td>合计:{{ sum }}</td>
          <td colspan="5"></td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import shop from './components/购物车.vue'
export default {
  name: 'shopC',
  data() {
    return {
      usertxt: '',

      goodList: [
        {
          name: '诸葛亮',
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: '蔡文姬',
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: '妲己',
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: '鲁班',
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    }
  },

  methods: {
    // tou函数，删除指定的某项
    tou(index) {
      // 如果数组为空，全选为false
      if (!this.goodList.length) {
        console.log(this.goodList.length)
        this.Allbtn = false
      }
      this.goodList.splice(index, 1)
    },
    // 数据在哪里处理数据的方式就在那个组件身上
    // 减
    BtnDel(DelNum) {
      DelNum.num--
      this.total -= DelNum.price
    },
    // 加
    BtnAdd(AddNum) {
      AddNum.num++
    },
    // 反选
    backbtn() {
      this.goodList.forEach((item) => (item.checked = !item.checked))
    },
    // 选框全部清除
    Delbtn() {
      this.goodList.forEach((item) => (item.checked = false))
    },
    // 查找事件
    lookup() {
      if (!this.usertxt.trim()) return alert('请输入查询的关键字')
      this.goodList.map((item) => {
        if (item.name.indexOf(this.usertxt) !== -1) {
          return (item.checked = true)
        }
      })
      this.usertxt = ''
    },
    // 清空当前项数量
    empty(mor) {
      mor.num = 1
    },
  },
  components: {
    shop,
  },
  computed: {
    // 全选，单选
    Allbtn: {
      get() {
        // 判断数组是否为空，用于清除全选
        if (!this.goodList.length) return
        return this.goodList.every((item) => item.checked)
      },
      set(val) {
        this.goodList.forEach((item) => (item.checked = val))
      },
    },

    // 勾选计算总价
    sum() {
      const checkeds = this.goodList.filter((item) => item.checked)
      return checkeds.reduce((a, b) => {
        return a + b.num * b.price
      }, 0)
    },

    // 排序
    sorts: {
      set(val) {
        if (val) {
          this.goodList.sort((a, b) => {
            return val === 1 ? a.price - b.price : b.price - a.price
          })
        }
      },
      get() {},
    },
  },
}
</script>

<style></style>
